<template>
  <div>
    <!-- 标题 -->
    <div class="settitle">
      <div class="setimg" @click="$router.back()">
        <img src="../assets/imgs/iconse/左箭头.png" alt="" />
      </div>
      <div class="text">
        <p
          v-for="(item, index) in plist"
          :key="index"
          :class="[trs == item.tr ? 'con' : '']"
          @click="trsfun(index, item.tr)"
        >
          {{ item.name }}
        </p>
      </div>
    </div>

    <!-- 导航图片 -->
    <div class="imgs-box">
      <div class="item">
        <img src="../assets/imgs/gz/002w.jpg" alt="" />
      </div>
      <div class="item">
        <img src="../assets/imgs/gz/001w.jpg" alt="" />
      </div>
    </div>

    <!-- 数据列表·简历模板 -->
    <div class="list" v-if="showu">
      <!-- 记录itemid数值 -->
      <div
        class="items"
        v-for="item in list"
        :key="item.id"
        @click="runto(item.itemid)"
      >
        <div class="itimgs">
          <img :src="item.srcs" alt="" />
        </div>
        <div class="itemtext">
          <div class="itname">
            <span>{{ item.title }}</span>
          </div>
          <div class="tx">
            <p v-for="item in item.tx" :key="item">{{ item }}</p>
          </div>
          <div class="itex">
            <span>{{ item.cons }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据列表·简历模板 -->
    <div class="list" v-if="!showu">
      <!-- 记录itemid数值 -->
      <div
        class="items"
        v-for="item in listse()"
        :key="item.id"
        @click="runto(item.itemid)"
      >
        <div class="itimgs">
          <img :src="item.srcs" alt="" />
        </div>
        <div class="itemtext">
          <div class="itname">
            <span>{{ item.title }}</span>
          </div>
          <div class="tx">
            <p v-for="(item, index) in item.tx" :key="index">
              {{ item }}
            </p>
          </div>
          <div class="itex">
            <span>{{ item.cons }}</span>
          </div>
        </div>
      </div>
    </div>

    <br />
  </div>
</template>

<script>
import { getTepJsonData } from "../api/tep.js";
export default {
  data() {
    return {
      list: null,
      plist: null,
      trs: "mb",
      showu: true,
    };
  },
  methods: {
    getListFun() {
      getTepJsonData().then((data) => {
        this.list = data.list;
      });
    },
    getPlistFun() {
      getTepJsonData().then((data) => {
        this.plist = data.plist;
      });
    },
    trsfun(index, key) {
      console.log(index);
      this.trs = key;
      if (index == 0) {
        this.showu = true;
      } else if (index == 1) {
        this.showu = false;
      }
    },
    listse() {
      if (this.list) {
        return this.list.filter((item) => item.big);
      }
      return;
    },
    run() {
      if (this.$route.query.id) {
        this.trs = this.$route.query.id;
        this.showu = false;
      }
    },
    runto(itemid) {
      window.localStorage.setItem("itemid", itemid);
      this.$emit("runto", { a: true, itemid });
    },
  },
  created() {
    this.run();
    this.getListFun();
    this.getPlistFun();
  },
};
</script>

<style lang="scss" scoped>
/*标题*/
.settitle {
  position: fixed;
  width: 100%;
  top: 0px;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0px 0px 0px 1px rgba($color: #cccc, $alpha: 0.4);
  z-index: 99;
  .setimg {
    height: 18px;
    position: absolute;
    left: 15px;
    img {
      height: 100%;
      display: block;
    }
  }
  .text {
    display: flex;
    margin: 0 auto;
    p {
      font-size: 18px;
      color: #999;
      margin: 0px 20px;
      position: relative;
    }
    .con {
      color: #333;
      font-size: 20px;
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 2px;
        background-color: #f78d73;
        // top: 0px;
        bottom: -10px;
        right: 0px;
        left: 0px;
        margin: 0 auto;
      }
    }
  }
}

/*顶部导航图片*/
.imgs-box {
  display: flex;
  justify-content: space-around;
  margin-top: 61px;
  .item {
    width: 45%;
    border-radius: 6px;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
    }
  }
}

/*简历模板*/
.list {
  margin-top: 30px;
  .items {
    height: 120px;
    display: flex;
    box-sizing: border-box;
    padding: 10px 20px;
    margin: 0px 20px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 4px #ccc;
    .itimgs {
      height: 80px;
      img {
        height: 100%;
      }
    }
    .itemtext {
      display: flex;
      flex-direction: column;
      margin-left: 30px;
      overflow: hidden;
      .itname {
        span {
          font-size: 17px;
          color: #333;
        }
      }
      .tx {
        height: 30px;
        margin: 6px 0px;
        text-align: center;
        opacity: 0.6;
        display: flex;
        align-items: center;
        p {
          background-color: #ccc;
          padding: 2px 7px;
          font-size: 12px;
          border-radius: 4px;
          margin: 0px 12px;
        }
      }
      .itex {
        span {
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #3370e7;
        }
      }
    }
  }
}
</style>